<html>
<body>
<style>
.hexagon {
	width: 100px;
	height: 55px;
	background-image:url(/img/terrain/grass1/grass1_r1.png);
	position: relative;
}
.hexagon:hover{
background-image:url(/img/terrain/grass1/grass1_r2.png);
}
.hexagon:before {
	content: "";
	position: absolute;
	top: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid red;
}
.hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px; 
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid red;
}
</style>
<div style="padding:50px;">
<div></div><div class="hexagon"></div><div></div>
</div>
</body>
</html>